<script setup lang="ts">
type CampaignInfo = Api.GetDataItem<typeof apis.apiInviteChannel>;

defineProps<{
  info: CampaignInfo;
}>();

function deleteCampaign(info: CampaignInfo) {
  if (info.is_default) {
    antdModal.confirm({
      content: $t('8C_8meb9jrl9Xzxzx8Lmy'),
      class: 'ant-cover__confirm-modal',
      centered: true,
      okCancel: false,
    });
    return;
  }

  antdModal.confirm({
    content: $t('s7xVl9WrKhp62L4nQjk'),
    class: 'ant-cover__confirm-modal',
    centered: true,
    async onOk() {
      await apis.apiInviteDeleteChannel(
        { requestBody: { channel_id: info.channel_id } },
        { successMessage: $t('zsaLk1KtXyRrJmdsq5Jo2') },
      );
      queryClient.invalidateQueries({
        queryKey: [apis.apiInviteChannel.id],
        exact: false,
      });
    },
  });
}
</script>

<template>
  <div v-if="info" class="relative grid gap-2 b-b-(1 sys-layer-d solid) py-4 text-sm">
    <!-- 默认渠道标签 -->
    <div
      v-if="info.is_default"
      class="absolute transform-origin-center-left scale-80 rounded-2 rounded-bl-0 bg-green-500 px-2 py-1 text-xs -top-2"
    >
      {{ $t('q9Zw2lmLqFkf1yUDi7FXn') }}
    </div>

    <!-- 头部 -->
    <div class="grid grid-cols-[1fr_auto] flex-between gap-1">
      <div class="cursor-pointer" @click="globalPopups.modCampaign.open({ id: info.channel_id })">
        <span>{{ info.name }}</span>
        <i class="i-ri:edit-2-fill ml-1 text-1.2em" />
      </div>

      <div class="row-span-2 flex text-xl text-sys-text-body *:ml-1 *:size-7 *:flex-center *:cursor-pointer">
        <div
          class="active:scale-90 hover:text-sys-text-head"
          @click="globalPopups.referralShare.open({
            code: info.referral_code,
            url: envs.isTg ? info.telegram_invite_url : info.web_invite_url })"
        >
          <i class="i-ion:ios-share-alt" />
        </div>
        <div
          v-if="!info.is_default"
          class="active:scale-90 hover:text-sys-text-head"
          @click="deleteCampaign(info)"
        >
          <i class="i-ion:md-trash" />
        </div>
        <div
          class="active:scale-90 hover:text-sys-text-head"
          @click="globalPopups.dtlcampaign.open({ info })"
        >
          <i class="i-ri:eye-line" />
        </div>
      </div>

      <div class="text-xs text-sys-text-body">
        {{ $t('mpfV0uNyygTUc8UvPbfo3') }} {{ $d(info.create_time, 'full') }}
      </div>
    </div>

    <!-- 基本信息 -->
    <ul class="list-none p-0 *:my-2 -mb-2 *:flex-between">
      <li>
        <span class="text-sys-text-body">{{ $t('zmCZyLtncPIch0JvpNhr') }}</span>
        <span>{{ info.reg_count }}</span>
      </li>
      <li>
        <span class="text-sys-text-body">{{ $t('t6EaBaE5rr17Spu0w8gB') }}</span>
        <TAmount :value="info.profit_amount" symbol="$" iconPos="left" format="pad-dec" :decimals="6" />
      </li>
      <li>
        <span class="text-sys-text-body">{{ $t('nUj0W3DPxcotAmoLfyk') }}</span>
        <div class="ml-auto">
          <div class="flex justify-end gap-1">
            <span>Tg：{{ desensitize(info.telegram_invite_url, 10) }}</span>
            <TCopy :source="info.telegram_invite_url" :nthParent="1" />
          </div>
          <div class="flex justify-end gap-1">
            <span class="break-all text-right">Web：{{ desensitize(info.web_invite_url, 10) }}</span>
            <TCopy :source="info.web_invite_url" :nthParent="1" />
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<style lang="scss" scoped>
.commission-table {
  --radius: 4px;

  :deep(tr) {
    th,
    td {
      padding: 8px;
    }
  }
}
</style>
